<template>
    <Page class="Home" :options="mPageOptions">
        <template v-if="mData">
            <div v-if="mData.wordsList" class="BoxRow flex-h bottom">
                <!-- <div v-if="mData.composition.length" class="Pinyin flex-h">{{mData.composition}}</div> -->
                <div v-if="mData.rootList.length" class="ToBe flex-v RootItems">
                    <span class="Char" v-for="(item,index) in mData.rootList"
                        :selected="mData.rootIndex == index">{{item}}</span>
                </div>
                <div v-if="mData.wordsList.length" class="ToBe flex-1 flex-h scroll-x" ref="ToBe">
                    <span class="Char" v-for="(item,index) in mData.wordsList" v-if="index < 200" ref="ToBeItem"
                        :selected="mData.toBeIndex == index">{{item.word}}</span>
                </div>
            </div>

            <div v-if="mData.abc" class="ABCLayout flex-h middle">
                <div class="Item" v-for="(item,index) in mData.abc.items" :key="index"
                    :selected="mData.abc.index % mData.abc.items.length == index">{{item == " " ? "_" : item}}</div>
            </div>
        </template>

    </Page>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import AppPage from "app/common/AppPage";
import { PageOptions } from "app/components/navigation/Page.vue";
import R from "@/common/R";
import KeypadHelper, { Data, INPUT_MODE, setActiveLayout } from "@/common/KeypadHelper";

@Component({
    components: {
    }
})
export default class Home extends AppPage {

    @Prop({ default: "标题" }) readonly title!: string;


    mPageOptions = this.createPageOptions();
    createPageOptions(): PageOptions {
        let context = this;
        return {
            statusBar: {
                show: true,
                padding: true,
                backgroundColor: "transparent"
            },
            toolBar: {
                show: false,
                title: R.string.appName,
                padding: false,
            },
            navigationBar: {
                show: false,
            }
        }
    }

    mKeypadHelper!: KeypadHelper;



    mData: Data = {
        inputMode: INPUT_MODE[0], abc: null,
        composition: "",
        rootList: [], rootIndex: -1,
        wordsList: [], toBeIndex: -1,
        adaptor: null,
    };

    @Watch("mData.toBeIndex")
    onChange_ToBeIndex(value: number) {
        this.scrollToBe();
    }

    onStart() {
        // this.themeLight();
    }

    mounted() {
        IMEConnectSDK.init("9key");
        this.mData.adaptor = IMEConnectSDK.adaptor;
        this.mData.adaptor.setLanguage("chinese_cn");
        if (__DEV__) {
            this.mKeypadHelper = new KeypadHelper({
                context: this,
                inputContext: null,
                data: this.mData,
            });
            window.resizeTo(0, 0);
            return;
        }
        // monitor(this);
        let im = navigator.mozInputMethod;
        // console.log(im, im.inputcontext);
        im.addEventListener("inputcontextchange", (e) => {
            let inputContext = e.target.inputcontext;
            if (inputContext && inputContext.inputMode != "native") {
                if (this.mKeypadHelper) {
                    return;
                }
                this.mKeypadHelper = new KeypadHelper({
                    context: this,
                    inputContext: inputContext,
                    data: this.mData,
                });
                window.resizeTo(0, 0);
                console.log("激活输入");
            } else {
                if (!this.mKeypadHelper) {
                    return;
                }
                this.mData.adaptor.reset();
                this.mKeypadHelper = null as any;
                this.mData.abc = null;
                this.mData.composition = "";
                this.mData.rootList = [];
                this.mData.rootIndex = -1;
                this.mData.wordsList = [];
                this.mData.toBeIndex = -1;
                console.log("取消输入");
            }
        });
        setActiveLayout("chinese_cn");
    }

    scrollToBe() {
        this.$nextTick(() => {
            if (this.mData.toBeIndex == -1 || !this.mData.wordsList?.length) {
                return;
            }
            let view = this.$refs.ToBeItem[this.mData.toBeIndex] as HTMLDivElement;
            let parent = this.$refs.ToBe as HTMLDivElement;
            if (!parent || !view) {
                return;
            }
            parent.scrollTo({
                behavior: "smooth",
                left: view.offsetLeft - parent.clientWidth / 2,
            });
        })
    }

    onClick_List() {
        this.$prompt.showDialog_List({
            title: "菜单",
            data: [
                {
                    label: "刷新", click: () => {
                        this.$bus.$emit("refresh-Home")
                    }
                },
                {
                    label: "关于", click: () => {
                        this.startPage("About");
                    }
                },
                {
                    label: "退出", click: () => {
                        window.close();
                    }
                },
            ]
        }, (item, index) => {
            item.click();
        })
    }
}
</script>

<style lang="scss" scoped>
.Home {
    // background: rgb(160, 160, 160);
    $color: #843eff;
    $background: #313431;
    $radius: 3px;
    color: #eff1ef;
    .BoxRow {
        font-size: 16px;
        position: absolute;
        bottom: 3px;
        left: 3px;
        width: calc(100% - 6px);
        z-index: 9;
        .Pinyin {
            padding: 0px 3px;
            background: white;
            border-radius: $radius;
            // border-radius: 3px;
            border: 1px solid rgba($color: $color, $alpha: 1);
        }
        .ToBe {
            // border: 1px solid rgba($color: $color, $alpha: 1);
            overflow: hidden;
            background: $background;
            position: relative;
            border-radius: $radius;
            & + .ToBe {
                margin-left: 1px;
            }
            .Char {
                flex-shrink: 0;
                padding: 0 2px;
                &[selected] {
                    background: $color;
                    // color: white;
                }
            }
        }
        .RootItems {
            // min-width: 55px;
            .Char {
                padding: 0 4px;
            }
        }
    }
    .ABCLayout {
        font-size: 16px;
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 9;
        background: $background;
        // border: 1px solid rgba($color: $color, $alpha: 1);
        border-radius: $radius;
        overflow: hidden;
        .Item {
            flex-shrink: 0;
            padding: 0 4px;
            &[selected] {
                background: $color;
                // color: white;
            }
        }
    }
}
</style>